﻿
@{
    Layout = null;
}

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        body, html {
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            position: absolute;
            margin: 0;
            height: 100%;
            width: 70%;
        }

        #r-result {
            width: 28%;
            top: 0px;
            font-size: 14px;
            float: right;
            margin: 10px;
        }


        /*新增*/
        #left-panel {
            position: absolute;
            left: 20px;
            top: 20px;
            overflow: hidden;
            pointer-events: none;
        }

        dd {
            margin: 0 15px;
            line-height: 26px;
            white-space: nowrap;
            overflow: hidden;
            list-style: decimal-leading-zero inside;
            color: #009E94;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bnT28X2DTHiyu2fCrTPsHcA2"></script>
    <title>地图页面</title>
</head>
<body>
    <div id="allmap">
    </div>
    <div id="r-result">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">景区查询</li>
            </ul>
            <div class="layui-tab-content" style="height: 100%;">
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">景区名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="cityName" name="title" lay-verify="title" autocomplete="off" placeholder="请输入城市名称" class="layui-input">
                    </div>
                    <input class="layui-btn" type="button" value="查询" onclick="theLocation()" style="float:right;margin-top:5px" />
                </div>
                <!--显示搜索框内查询的景区-->
                <div>
                    <div style="margin-top:10px" class="layui-col-md12" id="HotTable"></div>
                </div>
            </div>
          
        </div>
    </div>
</body>
</html>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Content/layui/layui.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    //固定位置
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 11);
    //允许拖拽
    map.enableDragging();
    map.setZoom(11); 

    //缩放
    map.enableScrollWheelZoom(true);
    //查询城市
    function theLocation() {
        var city = document.getElementById("cityName").value;
        if (city != "") {
            var params = {
                SearchText: city
            }
            $.ajax({
                type: "post",
                url: "/Home/GetSortListBySearch",
                data: params,
                dataType: "json",
                success: function (res) {
                    if (res.code == 0) {
                        //渲染数据
                        var Content = "";
                        $(res.data).each(function (n, Row) {
                            Content += ` <div class="layui-form-item layui-row layui-col-xs12"><dl class="fly-panel-main">
                                        <dd>
                                            <a href="/Novel/SelectNovelByType?type=${Row.SortID}" style="margin-left:10px" class="fly-link">${Row.SortName}</a><a  href='javascript:;' style="margin-left:10px">${Row.ScenicLevelName}</a>
                                            <span style="margin-left:10px">所在城市：${Row.CityName}</span>
                                            <a  href='javascript:;' onClick="LoadImageData(${Row.PlaceX},${Row.PlaceY},'${Row.SortName}','${Row.Picture}','${Row.Instructions}','${Row.SortID}')" class="fly-link">查看</a>
                                        </dd></dl></div>`
                        })
                        $("#HotTable").html(Content);
                    }
                    else {
                        layui.use(['layer'], function () {
                            var layer = layui.layer;
                            layer.msg(res.msg, { icon: 2 });
                        });
                    }
                }
            });
        }
    }
    //根据定位加载数据信息
    function LoadImageData(X, Y, SortName, Picture, Instructions, SortID) {
        //文本框模板
        var sContent =
            "<a href='/Novel/SelectNovelByType?type=" + SortID+"' style='margin-left:10px' class='fly-link'><h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + SortName + "</h4></a>" +
            "<img style='float:right;margin:4px' id='imgDemo' src=" + Picture + " width='139' height='104' title=" + SortName + "/>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + Instructions + "</p>" +
            "</div>";
        //移动中心点
        map.panTo(new BMap.Point(X, Y));

        var point = new BMap.Point(X, Y);
        var marker = new BMap.Marker(point);
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        map.centerAndZoom(point, 15);
        map.addOverlay(marker);

        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function () {
                infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            }
        });
    }
</script>